<template>
    <!-- 随堂练习批阅 -->
    <div id="marking-practice">
        <div class="preview-top">
            <div class="preview-top1">
                <div class="preview-top-content">
                <div v-if="resData">
                    <span class="preview-title">{{ resData.courseName }}</span>
                    <span class="preview-line">/</span>
                    <span>{{ resData.chapterName }}</span>
                    <span>姓名：{{ resData.userName }}</span>
                    <span>学号：{{ resData.userNumber }}</span>
                </div>
                </div>
            </div>
            <div class="preview-top2 jx-content">
                <div class="preview-top-content clearfix">
                    <div class="fl">
                        <span style="font-size:14px; color:#727272;">
                            作业得分：
                            <span  style="font-size:20px; color:#385899; font-weight:bold;">
                                {{ resData.score }}
                                <span style="font-size:14px;">分</span>
                            </span>
                        </span> 
                        &nbsp;
                    </div>
                    <div class="fr">
                        <!-- <div @click="submitMarking" class="button-style">提交</div>getPdf -->
                        <!-- <div class="download-pdf" v-show="pdfStatus" @click="downPdf"><img src="./../../../assets/images/icon_pdf.png"  /></div> -->
                        <div @click="postPdf" class="button-style">提交并归档</div>
                        <el-button :disabled="!resData.preview" @click="getPaper(resData.preview)" class="button-style">上一份</el-button>
                        <el-button :disabled="!resData.next" @click="getPaper(resData.next)" class="button-style">下一份</el-button>
                    </div>
                </div>
            </div>
        </div>
        <div class="jx-content preview-content" id="pdfDom" v-if="resData">
            <div v-for="(item,index) in resData.readingList" :key="index" style="margin-top: 40px;">
                <!-- 题型标题：一、选择题（每题1分，共2题） -->
                <h2 class="tq-title">
                    {{ questionNumber[index] }}、{{ item.typeName }}(共{{ item.questionList.length }}题)
                    <span style="color:#1277eb;" v-if="item.type < 3">（正确{{ item.right }}题）</span>
                </h2>
                <dl v-for="(item2,index2) in item.questionList" :key="index2">
                    <dt class="markdown-body">
                        <!-- 题型中序号 1.xxxx -->
                        {{ index2+1 }}、
                        <!-- 题目内容 -->
                        <span v-html="item2.content"></span>
                        <!-- 选择题 单选多选 -->
                        <span v-if="item.type == 1">
                            <span v-if="!item2.isMultipleChoice">[单选题]</span>
                            <span v-if="item2.isMultipleChoice">[多选题]</span>
                        </span>
                        <!-- 学生回答选择题 -->
                        <div style="display:flex;" class="chose-item" v-if="item.type === 1">
                            <!-- 单选题 -->
                            <span style="min-width:70px;">学生回答：</span>
                            <span style="display:flex;" v-if="!item2.isMultipleChoice">
                                <!-- 选择题没答 -->
                                <span v-if="!item2.userAnswer && item2.userAnswer !== 0">未填写</span>
                                <span style="min-width:26px;" v-else>{{ qKey[item2.userAnswer] }}、</span>
                                <span style="display:inline-block;" class="markdown-body" v-html="item2.choiceList[item2.userAnswer]"></span>
                                <!-- 归档显示 -->
                                <span class="showicon">
                                    <span class="showicon-right" v-if="item2.right">
                                        √
                                    </span>
                                    <span class="showicon-wrong" v-else>
                                        ×
                                    </span>
                                </span>
                            </span>
                            <!-- 多选题 -->
                            <span v-if="item2.isMultipleChoice">
                                <!-- 选择题没答 -->
                                <span v-if="isChoseNull(item2,index2) || item2.userAnswer == []">
                                    未填写
                                    <!-- 归档显示 -->
                                    <span class="showicon">
                                        <span class="showicon-right" v-if="item2.right">
                                            √
                                        </span>
                                        <span class="showicon-wrong" v-else>
                                            ×
                                        </span>
                                    </span>
                                </span>
                                <span v-else>
                                    <span v-for="(choiceListItem,choiceListIndex) in item2.choiceList" :key="choiceListIndex">
                                        <div style="display:flex;" v-if="item2.userAnswer.includes(choiceListIndex)">
                                            <span style="min-width:26px;">{{ qKey[choiceListIndex] }}、</span>
                                            <span style="display:inline-block;" v-html="choiceListItem"></span>
                                            <!-- 归档显示 -->
                                            <span v-if="choiceListIndex == Math.min(...item2.userAnswer)" class="showicon">
                                                <span class="showicon-right" v-if="item2.right">
                                                    √
                                                </span>
                                                <span class="showicon-wrong" v-else>
                                                    ×
                                                </span>
                                            </span>
                                        </div>
                                    </span>
                                </span>
                                
                            </span>
                            <span v-if="item2.right">
                                <i class="iconright iconfont icon-zhengque1"></i>
                            </span>
                            <span v-else>
                                <i class="iconwrong iconfont icon-cuowu1"></i>
                            </span>
                            
                        </div>
                        <!-- 括号 判断题答案映射 正确 错误 -->
                        <div class="chose-item" v-else-if="item.type === 2">
                            学生回答：
                            <!-- 判断题没答 -->
                            <span v-if="!item2.userAnswer && item2.userAnswer !== false">未填写</span>
                            <span v-else>{{ judgekey[item2.userAnswer-0] }}</span>
                            <span v-if="item2.right">
                                <i class="iconright iconfont icon-zhengque1"></i>
                            </span>
                            <span v-else>
                                <i class="iconwrong iconfont icon-cuowu1"></i>
                            </span>
                            <!-- 归档显示 -->
                            <span class="showicon">
                                <span class="showicon-right" v-if="item2.right">
                                    √
                                </span>
                                <span class="showicon-wrong" v-else>
                                    ×
                                </span>
                            </span>
                        </div>
                        <!-- 填空题学生回答 -->
                        <div class="stu-answer" v-else-if="item.type === 3">
                            学生回答：
                            <span v-if="!item2.userAnswer">未填写</span>
                            <span v-else>{{ item2.userAnswer }}</span>
                            <span v-if="item2.right">
                                <i class="iconright iconfont icon-zhengque1"></i>
                            </span>
                            <span v-else>
                                <i class="iconwrong iconfont icon-cuowu1"></i>
                            </span>
                            <span @click="correct(item2)" class="correct">纠正</span>
                            <!-- 归档显示 -->
                            <span class="showicon">
                                <span class="showicon-right" v-if="item2.right">
                                    √
                                </span>
                                <span class="showicon-wrong" v-else>
                                    ×
                                </span>
                            </span>
                        </div>
                        <!-- 附件题 -->
                        <div class="stu-answer" v-else-if="item.type === 7">
                            学生回答：
                            <span v-if="!item2.userAnswer">未填写</span>
                            <span v-else>
                                {{ item2.userAnswer }}
                                <a href="javascript:;" @click="downloadzip(item2)">下载</a>
                                <a href="javascript:;"  @click="toWatch7(item2)">查看</a>
                            </span>
                            
                        </div>
                        <!-- 简答题 -->
                        <div v-else-if="item.type === 4">
                            学生回答：
                            <span v-if="!item2.userAnswer">未填写</span>
                            <span v-else v-html="item2.userAnswerContentHtml"></span>
                        </div>
                        <!-- 其他题学生回答 -->
                        <div class="stu-answer" v-else>
                            学生回答：
                            <span v-if="!item2.userAnswer">未填写</span>
                            <span v-else>{{ item2.userAnswer }}</span>
                        </div>

                        <!-- 选择题正确答案 -->
                        <span style="display:flex;" v-if="!item2.right && item.type === 1">
                            <span class="c-blue" style="min-width:70px;">正确答案：</span>
                            <span style="color:#333;" v-if="item.type === 1">
                                <span v-for="(choiceListItem,choiceListIndex) in item2.choiceList" :key="choiceListIndex">
                                    <div style="display:flex;" v-if="item2.rightAnswer.includes(choiceListIndex)">
                                        <span style="min-width:26px;">{{ qKey[choiceListIndex] }}、</span>
                                        <span v-html="choiceListItem"></span>
                                    </div>
                                </span>
                            </span>
                        </span>
                        <!-- 非选择题正确答案 -->
                        <span v-if="!item2.right && item.type !== 1 && item.type !== 7">
                            <span class="c-blue">正确答案：</span>
                            <!-- <span>{{ qKey[item2.rightAnswer] }}、</span> -->
                            <!-- <span class="markdown-body" v-html="item2.choiceList[item2.rightAnswer]"></span> -->
                            <!-- {{ item2 }} -->
                            <!-- <span v-if="item.type === 1">{{ item2.rightAnswer.map(item => qKey[item]).join("") }}</span> -->
                            <!-- 判断题映射 正确 错误 -->
                            <span v-if="item.type === 2">{{ judgekey[item2.rightAnswer-0] }}</span>
                            <span v-else v-html="item2.rightAnswer"></span>
                        </span>
                        <!-- 得分input框 -->
                        <!-- <div v-if="item.type > 2" class="c-blue question-score">
                        得分：
                        <el-input @keyup.native="provingCount(item2,'score',item)" v-bind="questionScore" v-model.number="item2.score"></el-input>
                        </div> -->
                        <div class="analysis-box" v-if="item2.jxContentHtml">
                            <br />
                            <span class="analysis-title">答案解析：</span>
                            <div class="analysis-content" v-html="item2.jxContentHtml"></div>
                        </div>
                    </dt>
                    <!-- 选择题选项 -->
                    <!-- <dd v-if="item.type == 1" v-for="(item3,index3) in item2.choiceList" :key="index3">
                        <span v-html="qKey[index3] + '. ' + item3"></span>
                    </dd> -->
                </dl>
                <!-- <div v-if="item.type < 3">
                    正确{{ item.right }}题，错误{{ item.wrong }}题
                </div> -->
                <div class="question-score">
                    <span style="color:#1277eb;font-weight:bold;">得分：</span>
                    <el-input v-show="inputStatus" v-bind="questionScore" v-model.number="item.totalScore" @keyup.native="provingCount(item,'totalScore')"></el-input>
                        <span v-show="!inputStatus" style="display: inline-block;">{{item.totalScore}}</span>
                </div>
            </div>
            <!-- 二期新增 -->
            <div class="question-assess" style="height: 35px; margin-bottom: 0;">
                <span class="title">总分 :</span>
                {{ resData.score }}&nbsp;分
            </div>
            <div class="question-assess" style="padding-bottom:50px">
                <p class="title" style="line-height:34px">评价 : </p>
                <div v-if="inputStatus">
                    <div class="question-assess-right" v-if="list.length >0" >
                        <div style="margin-top: 20px">
                            <el-radio-group v-model="radio2" size="small"  @change='changelist'>
                                <el-radio-button :label="item.id" v-for="(item ) in list" :key="item.id"   >
                                    {{ item.name }}
                                    <span v-if="item.selected">(默认)</span>
                                </el-radio-button>
                            </el-radio-group>
                            <span  @click="dialogTemplate" class="spans" v-if="list.length >0"><i class="iconfont icon-shezhi"></i> 设置</span>
                        </div>
                    </div>

                </div>
                <dialogTemplate ref="dialogTemplate" @changeinit="changeinit"></dialogTemplate>
                <div>
                     <el-input
                        v-if="inputStatus"
                        v-model="assessTextarea"
                        type="textarea"
                        placeholder="请输入内容"
                        maxlength="200"
                        show-word-limit></el-input>
                    <div v-else style="width: 94%; display: inline-block; line-height: 1.5;">{{ assessTextarea }}</div>
                </div>
            </div>
           
        </div>
    </div>
</template>
<script>
    import axios from "axios";
    import $ from "jquery";
    import dialogTemplate from '@/components/dialogTemplate'
    import { evaluation} from '@/api/Virtual';
    //导出word
    import "../../../../static/wordExport/jquery.wordexport";
    export default {
        components: {
            dialogTemplate
        },
        data() {
            return {
                abc:'',
                //班级id
                classId: this.$route.query.id,
                // 课程ID
                courseId: '',
                //章节id
                chapterId: this.$route.query.chapterId,
                //类似学生id
                checkingId: this.$localstorage.getLocalStorage("checkingId"),
                paramsData: {},
                //接收的题目列表
                resData: "",
                //发送的数据
                //reqData:'',
                //选择题
                questionList1: null,
                //判断题
                questionList2: null,
                //填空题
                questionList3: null,
                //简答题
                questionList4: null,
                //编程题
                questionList5: null,
                qKey: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"],
                judgekey: ["错误", "正确"],
                questionNumber: ["一", "二", "三", "四", "五", "六"],
                questionName: [
                    {
                        type: 1,
                        name: "选择题"
                    },
                    {
                        type: 2,
                        name: "判断题"
                    },
                    {
                        type: 3,
                        name: "填空题"
                    },
                    {
                        type: 4,
                        name: "简答题"
                    },
                    {
                        type: 5,
                        name: "编程题"
                    },
                    {
                        type: 6,
                        name: "实验题"
                    }
                ],

                // 二期更改
                assessTextarea: '',
                pdfStatus: false,
               

                pdfBlob: '',

                inputStatus: true,


                //yx添加评价模板
                radio2:'',
                list:[],
                flag:''
            };
        },
        computed: {
            //计算除选择判断外其他题得分和总分
            questionScore() {
                let that = this;
                if (that.resData) {
                    //计算总分
                    let readingList = that.resData.readingList;
                    that.resData.score = readingList.map(item => item.totalScore - 0).reduce((total, num) => total + num);
                }
            }
        },
        created() {
            let self = this
            self.courseId = this.$localstorage.getLocalStorage("setCourseId")
        },
        mounted() {
            this.init();
            //this.getInit()
            //this.viewFu();
        },
       
        methods: {
//#region yx-评价模板
            //获取模板内容
            getInit(){
                let type = 3
                evaluation(type).then((res) => {
                    this.list = res.data
                    let n;
                    let idslist=this.list.map(i =>{ return i.id})
                    
                    if(this.radio2  &&　idslist.includes(this.radio2)  && (this.assessTextarea ||　this.assessTextarea != null || this.assessTextarea != undefined) ){
                        if( this.flag ){
                            n = this.list.findIndex(i =>{ return i.id ==  this.radio2})
                            this.assessTextarea = this.list[n].content 
                        }
                    }else if(!this.radio2  &&  (this.assessTextarea ||　this.assessTextarea != null || this.assessTextarea != undefined)　){
                        
                         if( this.flag ){
                          
                            n = this.list.findIndex(i =>{ return i.selected == true})
                            this.assessTextarea = this.list[n].content 
                           
                        }
                    }else if(!this.radio2  && !this.assessTextarea){

                        n = this.list.findIndex(i =>{ return i.selected == true})
                        this.assessTextarea = this.list[n].content 
                    }else if(this.radio2  &&　!idslist.includes(this.radio2) && (this.assessTextarea ||　this.assessTextarea != null || this.assessTextarea != undefined)  ){
                        if( this.flag ){
                            n = this.list.findIndex(i =>{ return i.selected == true})
                            this.assessTextarea = this.list[n].content 
                        }
                       
                    }
                     
                })
            },
            dialogTemplate(){
                
                this.$refs.dialogTemplate.init()
            },
            changelist(con){
                for(let i=0; i<this.list.length; i++){
                    if(this.list[i].id == con ){
                        this.assessTextarea = this.list[i].content
                        break;
                    }
                }      
            },
            changeinit(flag){
                if(flag){
                    this.flag = true
                    this.getInit()
                   
                }
            },
           
//#region yx-评价结束
            //下载附件题
            downloadzip(item2){
                let self = this;
                console.log(item2.userAnswer,2);
                self.$http.get('tes/course/'+self.courseId+'/chapter/'+ self.chapterId +'/practice/downFile?userNumber='+ self.resData.userNumber +'&fileName='+ item2.userAnswer +'&id=' + item2.id,
                    {responseType: 'blob'}) .then((response) => {
                        
                    if (response.status === 200) {
                        //self.downloadFile('截图.png', 'test' + res.data.data);
                        let blob = new Blob([response.data], {type: response.headers['content-disposition']});
                        
                        self.abc = 'test'+ response.data.data;
                        let fileName = item2.userAnswer;
                        let url = window.URL.createObjectURL(blob);
                        let downloadElement = document.createElement('a');
                        downloadElement.style.display = 'none';
                        downloadElement.href = url;
                        downloadElement.download = fileName; //下载后文件名
                        document.body.appendChild(downloadElement);
                        downloadElement.click(); //点击下载
                        document.body.removeChild(downloadElement); //下载完成移除元素

                    }else {
                        self.$message({
                            message: response.data.message,
                            type: "error"
                        });
                    }   
                }).catch(err => {
                      console.log(err)
                })

                axios.get(
                    
                    ).then(function(res) {
                    if (res.status === 200) {
                        console.log(12345);
                            //self.downloadFile('截图.png', 'test' + res.data.data);
                            self.abc = 'test'+ res.data.data;
                            let downloadElement = document.createElement('a');
                            downloadElement.style.display = 'none';
                            downloadElement.href = 'test'+ res.data.data;
                            downloadElement.download = item2.userAnswer; //下载后文件名
                            downloadElement.click(); //点击下载
                    }else {
                        self.$message({
                            message: res.data.message,
                            type: "error"
                        });
                    }
                }).catch(function(err) {
                    if (err.response) {
                        console.log(err.response);
                    }
                });
                //'tes/course/'+courseId+'/chapter/'+ chapterId +'/practice/downFile?userNumber='+ resData.userNumber +'&fileName='+ item2.userAnswer +'&id=' + item2.id
                
            },
            //新页面打开附件题
            toWatch7(item){
                let that = this;
                let routeUrl = that.$router.resolve({
                    path: "/MarkingPracticeWatch7",
                    query: {
                        courseId:that.$localstorage.getLocalStorage("setCourseId"),
                        chapterId:that.chapterId,
                        fileName:item.userAnswer,
                        id:item.id,
                        courseName:that.resData.courseName,
                        chapterName:that.resData.chapterName,
                        userName:that.resData.userName,
                        userNumber:that.resData.userNumber,
                        time:that.resData.time
                    }
                });
                window.open(routeUrl .href, '_blank');
            },
             //获取试题
            viewFu(item) {
                var that = this;
                axios.get(
                    "/tes/course/"+ this.$localstorage.getLocalStorage("setCourseId") + "/chapter/" + that.chapterId + "/practice/view?userNumber=" + that.resData.userNumber + "&fileName=" + item.userAnswer + "&id=" + item.id
                    ).then(function(res) {
                    if (res.status === 200) {
                        if (res.data.code === 200) {
                            console.log(res,1);
                        } else {
                            that.$message({
                                message: res.data.message,
                                type: "error"
                            });
                        }
                    }
                }).catch(function(err) {
                    if (err.response) {
                        console.log(err.response);
                    }
                });
            },
            //纠正
            correct(item){
                let that = this;
                let scrollTop = document.documentElement.scrollTop;
                console.log(scrollTop,1234);
                //this.$set(item,'right',true);
                console.log(item,22);
                console.log(that.resData.id,33);
                ///course/{courseId}/check/jz
                axios.post("/tes/course/" + this.$localstorage.getLocalStorage("setCourseId") 
                + "/check/jz?jz=" + !item.right
                +"&quitId=" + item.id
                + "&id=" + that.resData.id
                )
                .then(function(res) {
                    if (res.status === 200) {
                        if (res.data.code === 200) {
                            that.$message({
                                message: "纠正成功",
                                type: "success"
                            });
                            item.right = !item.right;
                            //that.init();
                            // that.$nextTick(function(){
                            //     document.documentElement.scrollTop = scrollTop;
                            // });
                        } else {
                            that.$message({
                                message: res.data.message,
                                type: "error"
                            });
                        }
                    }
                }).catch(function(err) {
                    if (err.response) {
                        console.log(err.response);
                    }
                });
                console.log(item);
            },
            // 下载PDF
            downPdf(){

                let self = this
                // console.log(self.pdfBlob)
                // let blob = new Blob([self.pdfBlob], {type: 'application/pdf'});
                // let url = window.URL.createObjectURL(blob);
                // let downloadElement = document.createElement('a');
                // downloadElement.style.display = 'none';
                // downloadElement.href = url;
                // downloadElement.download = self.resData.chapterName + '.pdf'; //下载后文件名
                // document.body.appendChild(downloadElement);
                // downloadElement.click(); //点击下载
                // document.body.removeChild(downloadElement); //下载完成移除元素
                // window.URL.revokeObjectURL(url);
                self.$downloadfile.download(self.pdfBlob, self.resData.pdfName);
            },
            // 提交并归档
            postPdf(){
                let self = this
                self.inputStatus = false
                const loading = this.$loading({
                    lock: true,
                    text: "正在提交中...",
                    spinner: "el-icon-loading",
                    background: "rgba(0, 0, 0, 0.7)"
                });
                let pdfHtml;
                self.$nextTick(() => {
                    pdfHtml =  $('#pdfDom').html()
                    let content =   '<!doctype html>'+
                                    '<html>'+
                                    '<head>'+
                                    '<meta charset="utf-8">'+
                                    '<title>批阅-随堂练习</title>'+
                                    '<style type="text/css">html{margin:0;padding:0;height:100%;font-family:Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;font-weight:400;-webkit-font-smoothing:antialiased}article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}html,body,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,legend,input,label,textarea,p,blockquote,th,td{margin:0;padding:0;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;-ms-text-size-adjust:none;-o-text-size-adjust:none;text-size-adjust:none;line-height:1}body,textarea{font-family:"Microsoft YaHei";font-size:100%;line-height:1;font-weight:400;color:#666;background:#f8f8f8;height:100%;width:100%}a{text-decoration:none;color:#333333}em,i{font-style:normal}img,button{background:transparent;border:0 none;vertical-align:middle}ul{list-style:none}table,th,td,fieldset,legend{font-weight:400;border:0 none;border-collapse:collapse}input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color:#bbb}a,input,button{-webkit-tap-highlight-color:rgba(255,0,0,0);outline:0;-webkit-appearance:none}select{outline:0;-webkit-appearance:none}textarea{cursor:auto;outline:none;-webkit-appearance:none}body{font-size:14px;background:#f8f8f8;padding-right:0 !important}.iconfont{font-family:"iconfont" !important;font-size:16px;font-style:normal;-webkit-font-smoothing:antialiased;-webkit-text-stroke-width:0.2px;-moz-osx-font-smoothing:grayscale}.el-breadcrumb{float:left;margin:18px auto 0;font-size:12px;height:18px;line-height:18px}.el-breadcrumb .el-breadcrumb__item:last-child .el-breadcrumb__inner a{color:#6a6a6a;border:solid 1px #6a6a6a;padding:3px 15px;border-radius:20px}.el-breadcrumb .el-breadcrumb__inner a{color:#6a6a6a;font-weight:normal}.el-breadcrumb .el-breadcrumb__inner a:hover{color:#1277eb}.courses-nav{width:1200px;margin:20px auto 0;-webkit-box-shadow:0 0 10px rgba(0,0,0,0.05);box-shadow:0 0 10px rgba(0,0,0,0.05);padding:0 40px;-webkit-box-sizing:border-box;box-sizing:border-box;background:#fff;border-radius:3px}.courses-nav .el-menu .el-menu-item{padding:0;margin-right:50px;color:#474747}.courses-nav .el-menu .el-menu-item.is-active{color:#385899;border-bottom:2px solid #385899}.courses-erji-nav .el-menu{height:60px;-webkit-box-sizing:border-box;box-sizing:border-box}.courses-erji-nav .el-menu .el-menu-item{padding:0;margin-right:48px;color:#474747}.courses-erji-nav .el-menu .el-menu-item:hover{background:transparent}.courses-erji-nav .el-menu .el-menu-item.is-active{color:#385899;border-bottom:2px solid #385899}.clear{clear:both}.clear-fix:after{display:block;content:"";clear:both}.clearfix:after{display:block;content:"";clear:both}.fl{float:left}.fr{float:right}.c-red{color:#ff4240;padding:5px 0}.c-blue{color:#385899}.c-btn-blue{color:#1277eb}.fs14{font-size:14px}.fs16{font-size:16px}.fs18{font-size:18px}.fs24{font-size:24px}.fbold{font-weight:bold}.text-right{text-align:right !important}.text-center{text-align:center !important}.text-left{text-align:left !important}a{color:#1277eb}a:hover{color:#385899}.button-style{border:1px solid #1277eb;height:32px;width:auto;text-align:center;vertical-align:middle;line-height:30px;color:#1277eb;cursor:pointer;border-radius:20px;padding:0 16px;font-size:14px;display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box}.button-style:hover{background:#1277eb;color:#fff}.button-style:focus{background:#fff;border:1px solid #1277eb;color:#1277eb}.button-style:focus:hover{background:#1277eb;color:#fff}.blueStreak{background:#385899;width:2px;float:left;height:15px}.el-switch.is-checked .el-switch__core{border-color:#1ac48a;background-color:#1ac48a}.el-form-item__label{height:32px;line-height:32px}.el-input__inner{width:150px;height:32px;border-radius:4px;border:1px solid #d9d9d9}.el-form-item__content{height:32px;line-height:32px}.el-date-editor.el-input,.el-date-editor.el-input__inner{width:150px}.el-textarea__inner{border:1px solid #d9d9d9}textarea{background:#fff}.el-checkbox__input.is-checked .el-checkbox__inner,.el-checkbox__input.is-indeterminate .el-checkbox__inner{background-color:#1277eb;border-color:#1277eb}.el-checkbox__inner:hover{border-color:#1277eb}.el-radio__input.is-checked .el-radio__inner{border-color:#1277eb;background:#1277eb}.el-radio__inner{border-color:#1277eb}.el-radio__input.is-checked+.el-radio__label{color:#385899}.jx-title{color:#474747;font-size:16px;font-weight:normal;line-height:50px}#jx-app{height:100%}.jx-content{width:1200px;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-shadow:0 0 10px rgba(0,0,0,0.05);box-shadow:0 0 10px rgba(0,0,0,0.05);background:#fff;border-radius:5px;padding:30px 40px;margin:0 auto 20px;color:#474747;line-height:30px;font-size:14px}.jx-container{width:1200px;margin:0 auto}.jx-index-container{position:relative}.el-table .el-button--text{color:#385899;font-size:14px}.el-table .el-button--text a{color:#385899}.el-table .el-checkbox__inner{border:1px solid #8e8e8e}.el-table th{background:#fafafa;padding:14px 0}.el-table td{padding:10px 0}.el-table th,.el-table td{text-align:center;color:#727272;font-size:14px}.el-table th.is-leaf{border-bottom:1px solid #e8e8e8}.el-pagination{position:relative;padding:30px;text-align:right}.el-pagination .el-input__inner{width:46px}.el-pagination .el-pager li.active+li{border-left:1px solid #d9d9d9}.el-pagination .el-pager li.active{color:#1277eb;border:1px solid #1277eb}.el-pagination .el-pager li,.el-pagination .btn-prev,.el-pagination .btn-next{border:1px solid #d9d9d9;font-weight:normal;color:#727272;margin-right:8px;min-width:30px;height:30px;line-height:28px;font-size:12px;padding:0 4px;-webkit-box-sizing:border-box;box-sizing:border-box;text-align:center;border-radius:4px}.el-pagination .el-pager li:hover,.el-pagination .btn-prev:hover,.el-pagination .btn-next:hover{color:#1277eb}.el-dialog{border-radius:5px}.el-dialog .el-dialog__header{background:#070e28;border-radius:5px 5px 0 0;height:46px;line-height:46px;padding:0 20px}.el-dialog .el-dialog__header .el-dialog__title{color:#fff;font-size:14px}.el-dialog .el-dialog__footer{padding:10px 20px 36px}.el-dialog .el-dialog__headerbtn{top:16px}.el-dialog .el-dialog__headerbtn .el-dialog__close{color:#fff}.el-dialog .el-dialog__headerbtn .el-dialog__close:hover{color:#fff}.v-note-wrapper .v-note-op{background:#f8f8f8 !important}.v-note-help-wrapper{z-index:9999 !important}.v-note-wrapper .v-note-op.shadow,.v-note-wrapper .v-note-panel.shadow{-webkit-box-shadow:none !important;box-shadow:none !important;border:1px solid #e1e1e1 !important}.v-note-wrapper .v-note-panel.shadow{border-top:0 !important}.el-input__icon{line-height:0}.beyond-hiding{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.beyond-hiding>*{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.beyond-hiding img{display:none}.nodata-box{width:100%;min-height:300px;text-align:center;padding:200px 0;font-size:14px;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-shadow:0 0 10px rgba(0,0,0,0.05);box-shadow:0 0 10px rgba(0,0,0,0.05);background:#fff;border-radius:5px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#727272}.course-chapter-nodata{width:100%;min-height:300px;text-align:center;padding:100px 0;font-size:14px;-webkit-box-sizing:border-box;box-sizing:border-box;background:#fff;border-radius:5px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#727272}.nodata-box-small{width:100%;text-align:center;padding:50px 0;font-size:14px;-webkit-box-sizing:border-box;box-sizing:border-box;background:#fff;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#727272}.nodata-muban{width:100%;text-align:center;padding:50px 0;font-size:14px;-webkit-box-sizing:border-box;box-sizing:border-box;background:#fff;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#727272}.question-content-timu *{display:inline-block}.question-content-timu br{display:none}.markdown-body p{line-height:1.5}.markdown-body strong{line-height:1.5}body{word-break:break-all}.table-button .el-button{border:none}.table-button .el-button:focus{background:none;border:none}.table-button .el-button:hover{background:none;color:#1277eb;border:none}.table-button .btn-disabled{cursor:not-allowed;background:none;border:none;color:#c0c4cc}.table-button .btn-disabled:hover{color:#c0c4cc}.table-button .btn-disabled:focus{color:#c0c4cc}.table-button a{color:#385899}.table-button a:hover{color:#1277eb}.el-select-dropdown .el-select-dropdown__item{padding:0 30px 0 20px}.icon-wenti-m{font-size:14px !important;font-weight:normal !important}.el-textarea{position:relative;display:inline-block;width:100%;vertical-align:bottom;font-size:14px}.el-textarea__inner{display:block;resize:vertical;padding:5px 15px;line-height:1.5;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;font-size:inherit;color:#606266;background-color:#FFF;background-image:none;border:1px solid #DCDFE6;border-radius:4px;-webkit-transition:border-color .2s cubic-bezier(.645,.045,.355,1);transition:border-color .2s cubic-bezier(.645,.045,.355,1)}.el-textarea__inner::-webkit-input-placeholder{color:#C0C4CC}.el-textarea__inner:-ms-input-placeholder{color:#C0C4CC}.el-textarea__inner::-ms-input-placeholder{color:#C0C4CC}.el-textarea__inner::-moz-placeholder{color:#C0C4CC}.el-textarea__inner::placeholder{color:#C0C4CC}.el-textarea__inner:hover{border-color:#C0C4CC}.el-textarea__inner:focus{outline:0;border-color:#409EFF}.el-textarea .el-input__count{color:#909399;background:#FFF;position:absolute;font-size:12px;bottom:5px;right:10px}.el-textarea.is-disabled .el-textarea__inner{background-color:#F5F7FA;border-color:#E4E7ED;color:#C0C4CC;cursor:not-allowed}.el-textarea.is-disabled .el-textarea__inner::-webkit-input-placeholder{color:#C0C4CC}.el-textarea.is-disabled .el-textarea__inner:-ms-input-placeholder{color:#C0C4CC}.el-textarea.is-disabled .el-textarea__inner::-ms-input-placeholder{color:#C0C4CC}.el-textarea.is-disabled .el-textarea__inner::-moz-placeholder{color:#C0C4CC}.el-textarea.is-disabled .el-textarea__inner::placeholder{color:#C0C4CC}.el-textarea.is-exceed .el-textarea__inner{border-color:#F56C6C}.el-textarea.is-exceed .el-input__count{color:#F56C6C}.el-input{position:relative;font-size:14px;display:inline-block;width:100%}.el-input::-webkit-scrollbar{z-index:11;width:6px}.el-button-group>.el-button.is-active,.el-button-group>.el-button.is-disabled,.el-button-group>.el-button:active,.el-button-group>.el-button:focus,.el-button-group>.el-button:hover{z-index:1}.el-input::-webkit-scrollbar:horizontal{height:6px}.el-input::-webkit-scrollbar-thumb{border-radius:5px;width:6px;background:#b4bccc}.el-input::-webkit-scrollbar-corner{background:#fff}.el-input::-webkit-scrollbar-track{background:#fff}.el-input::-webkit-scrollbar-track-piece{background:#fff;width:6px}.el-input .el-input__clear{color:#C0C4CC;font-size:14px;line-height:16px;cursor:pointer;-webkit-transition:color .2s cubic-bezier(.645,.045,.355,1);transition:color .2s cubic-bezier(.645,.045,.355,1)}.el-input .el-input__clear:hover{color:#909399}.el-input .el-input__count{height:100%;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#909399;font-size:12px}.el-input .el-input__count .el-input__count-inner{background:#FFF;display:inline-block;padding:0 5px}.el-input__inner{-webkit-appearance:none;background-color:#FFF;background-image:none;border-radius:4px;border:1px solid #DCDFE6;-webkit-box-sizing:border-box;box-sizing:border-box;color:#606266;display:inline-block;font-size:inherit;height:40px;line-height:40px;outline:0;padding:0 15px;-webkit-transition:border-color .2s cubic-bezier(.645,.045,.355,1);transition:border-color .2s cubic-bezier(.645,.045,.355,1);width:100%}.el-input__prefix,.el-input__suffix{position:absolute;top:0;-webkit-transition:all .3s;height:100%;color:#C0C4CC;text-align:center}.el-input__inner::-webkit-input-placeholder{color:#C0C4CC}.el-input__inner:-ms-input-placeholder{color:#C0C4CC}.el-input__inner::-ms-input-placeholder{color:#C0C4CC}.el-input__inner::-moz-placeholder{color:#C0C4CC}.el-input__inner::placeholder{color:#C0C4CC}.el-input__inner:hover{border-color:#C0C4CC}.el-input.is-active .el-input__inner,.el-input__inner:focus{border-color:#409EFF;outline:0}.el-input__suffix{right:5px;-webkit-transition:all .3s;transition:all .3s}.el-input__suffix-inner{pointer-events:all}.el-input__prefix{left:5px;-webkit-transition:all .3s;transition:all .3s}.el-input__icon{height:100%;width:25px;text-align:center;-webkit-transition:all .3s;transition:all .3s;line-height:40px}.el-input__icon:after{content:"";height:100%;width:0;display:inline-block;vertical-align:middle}.el-input__validateIcon{pointer-events:none}.el-input.is-disabled .el-input__inner{background-color:#F5F7FA;border-color:#E4E7ED;color:#C0C4CC;cursor:not-allowed}.el-input.is-disabled .el-input__inner::-webkit-input-placeholder{color:#C0C4CC}.el-input.is-disabled .el-input__inner:-ms-input-placeholder{color:#C0C4CC}.el-input.is-disabled .el-input__inner::-ms-input-placeholder{color:#C0C4CC}.el-input.is-disabled .el-input__inner::-moz-placeholder{color:#C0C4CC}.el-input.is-disabled .el-input__inner::placeholder{color:#C0C4CC}.el-input.is-disabled .el-input__icon{cursor:not-allowed}.el-input.is-exceed .el-input__inner{border-color:#F56C6C}.el-input.is-exceed .el-input__suffix .el-input__count{color:#F56C6C}.el-input--suffix .el-input__inner{padding-right:30px}.el-input--prefix .el-input__inner{padding-left:30px}.el-input--medium{font-size:14px}.el-input--medium .el-input__inner{height:36px;line-height:36px}.el-input--medium .el-input__icon{line-height:36px}.el-input--small{font-size:13px}.el-input--small .el-input__inner{height:32px;line-height:32px}.el-input--small .el-input__icon{line-height:32px}.el-input--mini{font-size:12px}.el-input--mini .el-input__inner{height:28px;line-height:28px}.el-input--mini .el-input__icon{line-height:28px}</style>'+
                                    '<style type="text/css">body{background:#f8f8f8}#marking-practice{background:#f8f8f8}#marking-practice .iconright{font-size:16px;color:#29a794;margin-left:8px}#marking-practice .iconwrong{font-size:14px;color:#ff4240;margin-left:8px}#marking-practice .correct{display:none; font-size:14px;color:#1277eb;border:1px solid #1277eb;padding:0px 2px;margin-left:10px;cursor:pointer}#marking-practice .analysis-box .analysis-title{color:#474747;font-weight:bold}#marking-practice .analysis-box .analysis-content{color:#474747}#marking-practice .showicon{}#marking-practice .showicon .showicon-right{font-size:24px;color:#29a794;margin-left:8px}#marking-practice .showicon .showicon-wrong{font-size:24px;color:#ff4240;margin-left:8px}#marking-practice .markdown-body{font-size:14px !important}#marking-practice img{max-width:100%}#marking-practice .underline{text-decoration:underline}#marking-practice .font16{font-size:16px;line-height:40px}#marking-practice .question-score .el-input{width:auto}#marking-practice .question-score .el-input .el-input__inner{width:58px}#marking-practice .preview-top{position:relative;z-index:1;height:120px;margin:0px auto 0}#marking-practice .preview-top .preview-top1{width:100%;height:60px;line-height:60px;background:#101937;position:fixed;top:0;color:#fff;font-size:14px}#marking-practice .preview-top .preview-top1 .preview-top-content{width:1200px;margin:0 auto}#marking-practice .preview-top .preview-top1 .preview-top-content span{margin-right:40px}#marking-practice .preview-top .preview-top1 .preview-top-content .preview-title{font-size:18px;margin-right:0}#marking-practice .preview-top .preview-top1 .preview-top-content .preview-line{margin:0 6px}#marking-practice .preview-top .preview-top2{margin-top:0;width:100%;line-height:80px;position:fixed;top:60px;padding:0;font-size:14px}#marking-practice .preview-top .preview-top2 .preview-top-content{width:1200px;margin:0 auto;padding:0 40px}#marking-practice .preview-top .preview-top2 .preview-top-content .button-style{margin-left:20px}#marking-practice .preview-top .preview-top2 .preview-top-content .download-pdf{float:left;cursor:pointer}#marking-practice .preview-top .preview-top2 .preview-top-content2{width:1200px;margin:0 auto;line-height:30px;padding-bottom:30px}#marking-practice .preview-content{width:1200px;margin:40px auto 20px;color:#474747;padding:0 40px;overflow:hidden;-webkit-box-shadow:0 0 0 rgba(0,0,0,0);box-shadow:0 0 0 rgba(0,0,0,0)}#marking-practice .preview-content p{display:inline}#marking-practice .preview-content .tq-title{color:#474747;font-size:16px;line-height:40px}#marking-practice .preview-content dl{padding-left:20px}#marking-practice .preview-content dt,#marking-practice .preview-content dd{font-size:14px;line-height:24px}#marking-practice .preview-content dt{margin-bottom:20px}#marking-practice .preview-content dd{padding-left:20px}#marking-practice .preview-content .btn-group{text-align:center}#marking-practice .preview-content .btn-group .button-style{margin:40px 5px}#marking-practice .question-assess{height:150px;margin-top:20px;margin-bottom:45px}#marking-practice .question-assess .title{width:4%;display:inline-block;vertical-align:top;font-size:16px;color:#385899}#marking-practice .question-assess .el-textarea{width:95%;height:150px}#marking-practice .question-assess .el-textarea textarea{resize:none}</style>' +
                                    '</head>'+
                                    '<body>'+
                                        '<div id="jx-app">'+
                                            '<div id="marking-practice">'+
                                                '<div id="pdfDom" class="jx-content preview-content">'+pdfHtml+'</div>'+
                                            '</div>'+
                                        '</div>'+
                                    '</body>'+
                                    '</html>'
                    self.resData.checkResult = self.assessTextarea
                    self.resData.htmlStr = content
                    self.resData.templateId = self.radio2
                    self.$http.post('/tes/course/'+self.courseId+'/check/type/1/class/'+self.classId+'/chapter/'+self.chapterId+'/student/'+self.$localstorage.getLocalStorage("checkingId"), self.resData).then(response => {
                        let res = response.data
                        if(res.code == '200'){
                            self.inputStatus = true
                            self.$message({
                                message: "提交成功",
                                type: "success"
                            })
                            loading.close()
                          
                            self.pdfStatus = true
                        }else {
                            loading.close()
                            self.inputStatus = true
                            self.$message({
                                message: res.message,
                                type: "error"
                            })
                        }
                    }).catch(function(err) {
                        if (err.response) {
                            console.log(err.response)
                        }
                    })
                })


            },
            init() {
                this.getPaper(this.$localstorage.getLocalStorage("checkingId"));
            },
            //选择题多选是否填写
            isChoseNull(item2, index2) {
                //是数组
                if (item2.userAnswer instanceof Array) {
                    console.log(!item2.userAnswer.length)
                    return !item2.userAnswer.length;
                } else {
                    //不是数组
                    console.log(item2.userAnswer && item2.userAnswer !== "empty")
                    // return item2.userAnswer 
                    return true
                }
            },
            //限制input框只能输入正整数 并且不能超出指定分数
            provingCount(item, prop, row) {
                let that = this;
                //限制输入数字
                // console.log(item[prop], 55);
                let reg = /^[0-9]+$/;
                let isInt = reg.test(item[prop]);
                // console.log(isInt, 66);
                if (!isInt) {
                    item[prop] = "";
                    that.$message.warning("只能输入整数");
                }
                if (item[prop] > 999) {
                    item[prop] = "";
                    that.$message.warning("分数不能超过三位数");
                }

            },
            //获取试题
            getPaper(checkingId) {
                var that = this;
                that.flag = false
                axios.get("/tes/course/" + this.$localstorage.getLocalStorage("setCourseId") + "/check/type/1/class/" + that.classId + "/chapter/" + that.chapterId + "/student/" + checkingId).then(function(res) {
                // console.log("成功");
                // console.log(res, 110);
                    if (res.status === 200) {
                        if (res.data.code === 200) {
                            console.log(666);
                            //滚动条置顶
                            $("html,body").scrollTop(0);
                            //替换填空题括号
                            //填空题替换(+)为（）
                            let fillQuestion = res.data.data.readingList.find(
                                item => item.type === 3
                            );
                            if (fillQuestion) {
                                let content = fillQuestion.questionList;
                                $.each(content, function(i, d) {
                                    let str = d.content;
                                    var result = str.replace(/\(\+\)/g, "（）"); //把(+)替换成()
                                    d.content = result;
                                });
                            }
                            that.resData = res.data.data;
                            that.pdfStatus = res.data.data.pdf === undefined ? false : true
                            
                            that.assessTextarea = res.data.data.checkResult
                           
                           
                            that.pdfBlob = res.data.data.pdf
                            //yx模板
                            that.radio2= res.data.data.templateId
                            window.localStorage.setItem('checkingId',checkingId);
                            that.getInit()
                        } else {
                            that.$message({
                                message: res.data.message,
                                type: "error"
                            });
                        }
                    }
                }).catch(function(err) {
                    if (err.response) {
                        console.log(err.response);
                    }
                });
            },
            //提交批阅
            submitMarking() {
                var that = this;
                axios.post("/tes/course/" + this.$localstorage.getLocalStorage("setCourseId") + "/check/type/1/class/" + that.classId + "/chapter/" + that.chapterId + "/student/" + that.$localstorage.getLocalStorage("checkingId"),that.resData).then(function(res) {
                    // console.log("成功");
                    // console.log(res);
                    if (res.status === 200) {
                        if (res.data.code === 200) {
                            that.$message({
                                message: "提交成功",
                                type: "success"
                            });
                        } else {
                            that.$message({
                                message: res.data.message,
                                type: "error"
                            });
                        }
                    }
                }).catch(function(err) {
                    if (err.response) {
                        console.log(err.response);
                    }
                });
            },
            //上一份
            prevMarking() {},
            //下一份
            nextMarking() {}
        }
    };
</script>
<style scoped>
.el-radio-button:first-child .el-radio-button__inner{
    border-left:none
}
</style>
<style lang="scss">
    @import "../../../styles/layout/color_variables";
    .default{
        background: #f3f3f3;
    }
    body {
        background: #f8f8f8;
    }
    #marking-practice {
       
        .iconright{
            font-size:16px; 
            color:#29a794; 
            margin-left:8px;
        }
        .iconwrong{
            font-size:14px; 
            color:#ff4240; 
            margin-left:8px;
        }
        .correct{
            font-size: 14px;
            color:#1277eb;
            border:1px solid #1277eb;
            padding:0px 2px;
            margin-left:10px;
            cursor: pointer;
        }
        .analysis-box{
            .analysis-title{
                color:#474747;
                font-weight: bold;
            }
            .analysis-content{
                color:#474747;
            }
        }
        //归档显示
        .showicon{
            display: none;
            .showicon-right{
                font-size:24px; 
                color:#29a794; 
                margin-left:8px;
            }
            .showicon-wrong{
                font-size:24px; 
                color:#ff4240; 
                margin-left:8px;
            }
        }
        //190717
        background: #f8f8f8;
        .stu-answer{
        }
        .markdown-body {
            font-size: 14px !important;
        }

        img{
            max-width:100%;
        }
        .underline {
            text-decoration: underline;
        }
        .font16 {
            font-size: 16px;
            line-height: 40px;
        }
        //选择题答案下划线
        .chose-item {
        }
        .question-score {
            .el-input {
                width: auto;
                .el-input__inner {
                    width: 58px;
                }
            }
        }
        .preview-top {
            position: relative;
            z-index: 1;
            height: 120px;
            margin: 0px auto 0;
            .preview-top1 {
                width: 100%;
                height: 60px;
                line-height: 60px;
                background: #101937;
                position: fixed;
                top: 0;
                color: #fff;
                font-size: 14px;
                .preview-top-content {
                    width: 1200px;
                    margin: 0 auto;
                    span {
                        margin-right: 40px;
                    }
                    .preview-title {
                        font-size: 18px;
                        margin-right: 0;
                    }
                    .preview-line {
                        margin: 0 6px;
                    }
                }
            }
            .preview-top2 {
                margin-top:0;
                width: 100%;
                line-height: 80px;
                position: fixed;
                top: 60px;
                padding: 0;
                font-size: 14px;
                .preview-top-content {
                    width: 1200px;
                    margin: 0 auto;
                    padding: 0 40px;
                    .button-style {
                        margin-left: 20px;
                    }
                    .download-pdf{
                        float: left;
                        cursor: pointer;
                    }
                }
                .preview-top-content2 {
                    width: 1200px;
                    margin: 0 auto;
                    line-height: 30px;
                    padding-bottom: 30px;
                }
            }
        }
        .preview-content {
            width: 1200px;

            margin: 40px auto 20px;
            color: $title-gray;
            padding: 0 40px;
            overflow: hidden;
            // box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
            box-shadow: 0 0 0 rgba(0, 0, 0, 0);
            p {
                display: inline;
            }
            .tq-title {
                color: $title-gray;
                font-size: 16px;
                line-height: 40px;
            }
            dl {
                padding-left: 20px;
            }
            dt,dd {
                font-size: 14px;
                //190717
                line-height: 24px;
                //190717
            }
                //190717
            dt {
                margin-bottom: 20px;
            }
            //190717
            dd {
                padding-left: 20px;
            }
            .btn-group {
                text-align: center;
                .button-style {
                    margin: 40px 5px;
                }
            }
        }
        .question-assess{
            // overflow: hidden;
            height: 150px;
            margin-top: 20px;
            margin-bottom: 45px;
            position: relative;
            .title{
                // float: left;
                width: 4%;
                display: inline-block;
                vertical-align: top;
                font-size: 16px;
                color: #385899;
                font-weight: bold;
                height: 50px;
            }
           
            .spans{
                color: #385899;
                cursor: pointer;
                
            }
            .question-assess-right{
                position: absolute;
                right: 10px;
                top: -17px;

            }
            .el-textarea{
                // float: left;
                width: 100%;
                height: 150px;
                textarea{
                    resize:none;
                }
            }
        }
    }
</style>
